<script>
import outMain from "@/components/outMain.vue";
import { ElMessage, ElLoading } from "element-plus";
// import { authDetails1, authDetails2, authDetails3 } from "@/http/api";
export default {
  components: { outMain },
  name: "",
  data() {
    return {
      showCont: true,
      detailId: this.$route.query.id,
      formData: {},
      stepArr: [
        { name: "渠道商信息", id: 1 },
        { name: "新增授权记录", id: 2 },
        { name: "累计授权记录", id: 3 },
      ],
      tableData: [{}],
      stepId: 1,
      queryData: {
        data_id: this.$route.query.id,
        page: 1,
        per_page: 20,
      },
      total: 0,
    };
  },
  props: {},
  setup() {},
  methods: {
    orderDetailFn(item) {
      this.$router.push({ path: "/orderDetail", query: { id: item.order_id } });
    },
    detailFn(item) {
      if (this.stepId == 2) {
        this.$router.push({
          path: "/physicalAssetsDetail",
          query: { id: item.sw_property_id },
        });
      } else if (this.stepId == 3) {
        this.$router.push({
          path: "/dataAssetsDetail",
          query: { id: item.sj_property_id },
        });
      }
    },
    stepFn(item) {
      this.stepId = item.id;
      if (item.id !== 1) {
        this.queryData.page = 1;
        // this.serchFn();
      }
    },
    serchFn() {
      if (this.stepId == 2) {
        this.getSendRecord();
      } else if (this.stepId == 3) {
        this.getSendRecord();
      }
    },
    async getSendRecord() {
      let qData = { ...this.queryData };
      const { data } = await authDetails2(qData);
      if (data.code == 1) {
        this.tableData = data.data.data;
        this.total = data.data.total;
      }
    },
    backFn() {
      this.$router.back();
    },
    async getData() {
      const loading = ElLoading.service({
        lock: true,
        text: "Loading",
        background: "rgba(255, 255, 255, 0.7)",
      });
      const { data } = await authDetails1({
        data_id: this.detailId,
      });
      setTimeout(() => {
        loading.close();
      }, 100);
      if (data.code == 1) {
        this.formData = data.data;
        this.showCont = true;
      }
    },
  },
  mounted() {},
  created() {
    // this.getData();
  },
};
</script>
<template>
  <outMain>
    <div class="formCont">
      <div class="formHead">
        <div>渠道商账号详情</div>
        <el-button type="primary" plain @click="backFn">返回上一级</el-button>
      </div>
      <div class="formMain" v-if="showCont">
        <div class="stepNav">
          <div
            :class="stepId === item.id ? 'stepItemActive' : 'stepItem'"
            @click="stepFn(item)"
            :key="index"
            v-for="(item, index) in stepArr"
          >
            {{ item.name }}
          </div>
        </div>
        <div class="stepCont" v-show="stepId == 1">
          <div class="formDes">
            <div class="desTitle">渠道商信息</div>
            <div class="desContPull">
              <div class="desCont">
                <div class="desItem">
                  <div class="desName">渠道商名称</div>
                  <div class="desText"></div>
                </div>
                <div class="desItem">
                  <div class="desName">登录账号</div>
                  <div class="desText"></div>
                </div>
                <div class="desItem">
                  <div class="desName">登录密码</div>
                  <div class="desText"></div>
                </div>
                <div class="desItem">
                  <div class="desName">联系人</div>
                  <div class="desText"></div>
                </div>
                <div class="desItem">
                  <div class="desName">手机号</div>
                  <div class="desText"></div>
                </div>
                <div class="desItem">
                  <div class="desName">所属城市</div>
                  <div class="desText"></div>
                </div>
                <div class="desItem">
                  <div class="desName">充值金额</div>
                  <div class="desText"></div>
                </div>
                <div class="desItem">
                  <div class="desName">累计授权</div>
                  <div class="desText"></div>
                </div>
                <div class="desItem">
                  <div class="desName">剩余授权</div>
                  <div class="desText"></div>
                </div>
                <div class="desItem">
                  <div class="desName">账号状态</div>
                  <div class="desText"></div>
                </div>
                <div class="desItem">
                  <div class="desName">创建时间</div>
                  <div class="desText"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="detailTableCont padding_white" v-if="stepId == 2">
          <div class="tableHead">
            <div class="tableName">新增授权记录（{{ total }}）</div>
            <div class="tableHead_right"></div>
          </div>
          <el-table
            class="tableMain"
            :data="tableData"
            stripe
            style="width: 100%"
          >
            <el-table-column
              prop="product_name"
              show-overflow-tooltip
              label="充值编号"
            />
            <el-table-column
              prop="property_cate_name"
              show-overflow-tooltip
              label="授权次数"
            />
            <el-table-column
              prop="property_cate_name"
              show-overflow-tooltip
              label="充值金额"
            />
            <el-table-column
              prop="create_time"
              show-overflow-tooltip
              label="授权时间"
            />
          </el-table>
          <div class="pageCont">
            <el-pagination
              v-model:currentPage="queryData.page"
              v-model:page-size="queryData.per_page"
              background
              layout="total, prev, pager, next, jumper"
              :total="total"
              @size-change="serchFn"
              @current-change="serchFn"
            />
          </div>
        </div>
        <div class="detailTableCont padding_white" v-if="stepId == 3">
          <div class="tableHead">
            <div class="tableName">累计授权记录（{{ total }}）</div>
            <div class="tableHead_right"></div>
          </div>
          <el-table
            class="tableMain"
            :data="tableData"
            stripe
            style="width: 100%"
          >
            <el-table-column
              prop="product_name"
              show-overflow-tooltip
              label="授权编号"
            />
            <el-table-column
              prop="property_cate_name"
              show-overflow-tooltip
              label="授权次数"
            />
            <el-table-column
              prop="property_cate_name"
              show-overflow-tooltip
              label="授权用户"
            />
            <el-table-column
              prop="create_time"
              show-overflow-tooltip
              label="授权时间"
            />
          </el-table>
          <div class="pageCont">
            <el-pagination
              v-model:currentPage="queryData.page"
              v-model:page-size="queryData.per_page"
              background
              layout="total, prev, pager, next, jumper"
              :total="total"
              @size-change="serchFn"
              @current-change="serchFn"
            />
          </div>
        </div>
      </div>
    </div>
  </outMain>
</template>
<style scoped lang="less"></style>
